<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="keywords" content="select">
  <meta name="description" content="select">
  <title>找回密码</title>
  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" href="../css/materialdesignicons.min.css">
  <!-- 引入 bootstrap 样式 -->
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
  <!-- 校验样式 -->
  <link rel="stylesheet" type="text/css" href="../js/bootstrap-validator/bootstrapValidator.css">
  
  <link rel="stylesheet" type="text/css" href="../css/style.min.css">
  <link rel="stylesheet" type="text/css" href="../css/form.css">
  <link rel="stylesheet" type="text/css" href="../css/retrievePassword.css">
</head>

<body>
  <header class="lyear-layout-header">
    <div id="logo" class="sidebar-header">
      <img src="../images/logo.png" title="LightYear" alt="LightYear" />
      <span class="p-l-30">农机购置与应用补贴申请办理服务系统</span>
    </div>
  </header>
  <div class="container-fluid p-t-50">
    <div class="page-header">
      <h1 class="page-title">找回密码</h1>
      <span>请通过输入登录名、手机号码重置您的密码</span>
    </div>

    <!-- 步骤进度 -->
    <div class="step-schedule">
      <div class="step-item step1 select">
        <span>1<i></i></span>
        <div>手机号验证</div>
      </div>
      <div class="step-item step2">
        <span>2<i></i></span>
        <div>重置密码</div>
      </div>
      <div class="step-item step3">
        <span>3<i></i></span>
        <div>完成</div>
      </div>
    </div>

    <!-- 表单内容 -->
    <!-- 手机号验证 -->
    <div class="form-item-box step1">
      <form id="phoneForm" class="form-con">

        <div class="el-form-item">
          <div class="el-form-item__label">登录名：</div>
          <div class="el-form-item__content form-group">
            <input type="text" name="userName" class="form-control w-400 user-name" required data-bv-trigger="blur"
              data-bv-notempty-message="登录名不能为空" placeholder="请输入登录名">
            <i class="input-prefix-icon"></i>
          </div>
        </div>

        <div class="el-form-item">
          <div class="el-form-item__label">手机号：</div>
          <div class="el-form-item__content form-group">
            <input type="text" name="phoneNumber" class="form-control w-400 phone-number" required
              data-bv-trigger="blur" data-bv-notempty-message="手机号不能为空" placeholder="请输入手机号">
            <i class="input-prefix-icon"></i>
          </div>
        </div>

        <div class="el-form-item">
          <div class="el-form-item__label">验证码：</div>
          <div class="el-form-item__content form-group w-400 verify">
            <div>
              <input type="text" name="codeNumber" class="form-control code-number" required data-bv-trigger="blur"
                data-bv-notempty-message="验证码不能为空" placeholder="请输入短信验证码">
              <i class="input-prefix-icon"></i>
            </div>
            <div class="verify-box">
              获取验证码
            </div>
          </div>
        </div>

      </form>
    </div>

    <!-- 重置密码 -->
    <div class="form-item-box step2 hide">
      <form id="pwdForm" class="form-con">

        <div class="el-form-item">
          <div class="el-form-item__label">新密码：</div>
          <div class="el-form-item__content form-group">
            <input type="password" name="newPwd" class="form-control w-400 new-pwd" required data-bv-trigger="blur"
              data-bv-notempty-message="新密码不能为空" placeholder="请输入新密码">
            <i class="input-prefix-icon"></i>
          </div>
        </div>

        <div class="el-form-item">
          <div class="el-form-item__label">确认密码：</div>
          <div class="el-form-item__content form-group">
            <input type="password" name="confirmPwd" class="form-control w-400 confirm-pwd" required
              data-bv-trigger="blur" data-bv-notempty-message="" placeholder="请再次输入新密码">
            <i class="input-prefix-icon"></i>
          </div>
        </div>

      </form>
    </div>

    <!-- 重置成功 -->
    <div class="form-item-box step3 hide">
      <div class="success-box">
        <img src="../images/retrievePassword/xgcg.png" alt="">
        <p>修改成功</p>
      </div>
    </div>

    <div class="operate-btn">
      <button class="custom-btn primary next-step" onclick="nextStep()">下一步</button>
      <button class="custom-btn primary sign-in-now hide" onclick="signInNow()">立即登录</button>
    </div>

  </div>

  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <!-- 校验js -->
  <script type="text/javascript" src="../js/bootstrap-validator/bootstrapValidator.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
  <!-- 正则校验 -->
  <script type="text/javascript" src="../utils/validator.js"></script>
  <script type="text/javascript" src="../js/retrievePassword.js"></script>
</body>

</html>